<template>
	<view class='Meetinglive'>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, key) in listData.docs" :key="key">
				<view class='Advertisement' v-if="item.ad" @tab="goToDetail(item)">
					<view class='bgtilte'><text>{{item.title1}}</text></view>
					<view><image :src="item.thumb" mode="widthFix"></image></view>
					<text class='smallTitle'>{{item.title2}}</text>
				</view>
				<view class="uni-media-list" @tap="goToDetail(item)" v-else>
					<image class="uni-media-list-logo" :src="item.thumb"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{ item.title1 }}</view>
						<view class="uni-media-list-text-bottom">
							<view v-if="item.top>1" class='textTop'>置顶*</view>
							<view v-else class='text'>{{ item.date }}</view>
							<view class='text'>{{item.comments>10000?'1w+':item.comments}}<image src="../../static/img/pinglun.png" mode=""></image></view>
							<view class='text'>{{item.likes>10000?'1w+':item.likes}}<image src="../../static/img/dianzan.png" mode=""></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="!listData.docs.length"><text>暂无数据</text></view> -->
		<view class="nomore" v-if="tips"><text>{{tips}}</text></view>
	</view>
</template>

<script>
	import {
		contentlist,
		adlist,
	} from '@/utils/api'
	export default {
		data() {
			return {
				category:'',
				listData:{ // 列表数据
					docs:[],
					"totalDocs": 1,
					"limit": 10,
					"hasPrevPage": false,
					"hasNextPage": true,
					"page": 1,
					"totalPages": 1,
					"pagingCounter": 1,
					"prevPage": null,
					"nextPage": null
				},
				page:1,
				tips:'',
			}
		},
		methods: {
			//获取列表数据
			async getList(){
				if(this.listData.hasNextPage){
					uni.showLoading({});
					let data = await contentlist({
						category:this.category,
						limit:10,
						page:this.page,
					})
					let addata = await adlist({category:this.category})
					uni.hideLoading();
					
					addata.data.map(item=>{
						item.ad = true
					})
					
					if(data.status == 0){
						this.page = this.page+1
						data.data.docs.map((item,index)=>{
							if(index == 3 && addata.data && addata.data[this.page-1]){
								data.data.docs.splice(index,0,addata.data[this.page-1])
							}
						})
						let docs = [...this.listData.docs,...data.data.docs]
						data.data.docs = docs
						this.listData = data.data
						console.log(66,this.listData)
					}
				}else{
					this.tips = '没有更多数据了'
				}
			},
			goToDetail(item){
				if(item.type == 'Video'){
					let urlBefore = ''
					if(item.stage == 10){
						urlBefore = '/pages/liveNotStart/liveNotStart'
					}else if(item.stage == 20){
						urlBefore = '/pages/liveing/liveing'
					}else if(item.stage == 30){
						urlBefore = '/pages/liveEndNot/liveEndNot'
					}else if(item.stage == 40){
						urlBefore = '/pages/liveEnd/liveEnd'
					}
					uni.navigateTo({
					    url: urlBefore+'?id='+item.id+'&ad='+(item.ad || '')
					});
				}else if(item.type == 'News'){
					uni.navigateTo({
					    url: '/pages/zazhi/zazhi?id='+item.id+'&ad='+(item.ad || '')
					});
				}
			}
		}, 
		onLoad(opt){
			this.category = opt.id
			uni.setNavigationBarTitle({
			    title: opt.name
			});
			setTimeout(function() {
				uni.setNavigationBarTitle({
					title: opt.name
				});	
			}, 1000);
			this.getList()
		},
		onShow(){
			let detailId = uni.getStorageSync("detailId");
			let HomeLike = uni.getStorageSync("HomeLike");
			let HomeComment = uni.getStorageSync("HomeComment");
			this.listData.docs.map(item=>{
				if(item.id == detailId){
					if(HomeLike>-1){
						item.likes = HomeLike
					}
					if(HomeComment>-1){
						item.comments = HomeComment
					}
				}
			})
		},
		onReachBottom(){
			console.log('到达底部')
			clearTimeout(this.listTimer)
			this.listTimer = setTimeout(()=>{
				this.getList()
			},300)
		}
	}
</script>

<style lang="scss">
	.Meetinglive{
		.Advertisement{
			padding: 39upx 32upx;
			width: 100%;
			height: auto;
			.bgtilte{
				margin-bottom: 14upx;
				text{
					font-size:30upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:1;
				}
			}
			.smallTitle{
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(153,153,153,1);
			}
			image{
				width: 100%;
			}
		}
		.uni-media-list-logo {
			width: 200upx;
			height: 120upx;
			margin-right: 40upx;
		}
		
		.uni-media-list-body {
			height: auto;
			justify-content: space-around;
		}
		.uni-media-list{
			padding: 38upx 32upx;
		}
		.uni-media-list-text-top {
			height: 74upx;
			font-size: 28upx;
			overflow: hidden;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
			overflow:hidden;
		}
		
		.uni-media-list-text-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 15upx;
			color:#999;
			.text{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			image{
				width: 25upx;
				height: 24upx;
				margin-left: 8upx;
				margin-top: -4upx;
			}
		}	
		.uni-list-cell::after{
			left: 0;
			background-color: rgba(244,244,244,1);
		}
		.uni-list::before,.uni-list:after{
			background-color: rgba(244,244,244,1);
		}
		.nomore{
			text-align: center;
			text{
				line-height: 120upx;
				color: #333;
			}
		}
	}
</style>
